<template>
  <div>
    <div ref="containerRef" class="scrollable-container" :style="containerStyle">
      <div class="sticky-top" v-show="dataSource.length > 0">
        <slot name="top"></slot>
      </div>
      <div class="card-container" v-if="dataSource.length > 0">
        <div class="card" v-for="(item, index) in currentPageData" :key="index" :style="cardStyle(item)">
          <div class="card-header" :style="generateStyle(item, 'header')">
            <div class="header-left-container" :style="generateStyle(item, 'headerLeft')">
              <slot name="header-left" :item="item" :index="index"></slot>
            </div>
            <div class="caption-container" :style="generateStyle(item, 'caption')">
              <slot name="caption" :item="item" :index="index"></slot>
            </div>
            <div class="header-right-container" :style="generateStyle(item, 'headerRight')">
              <slot name="header-right" :item="item" :index="index"></slot>
            </div>
          </div>
          <div class="card-content" :style="generateStyle(item, 'content')">
            <slot name="content" :item="item" :index="index"></slot>
          </div>
        </div>
      </div>
      <div v-else class="no-data">暂无数据</div>
      <div class="sticky-footer pagination" v-show="paginationEnabled && dataSource.length > 0">
        <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1" style="margin-right: 10px">
          <i class="el-icon-arrow-left"></i>
        </button>
        <input
          type="number"
          v-model.number="currentPage"
          min="1"
          :max="totalPages"
          style="width: 30px; text-align: center"
        />
        <span> / {{ totalPages }} </span>
        <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages" style="margin-left: 10px">
          <i class="el-icon-arrow-right"></i>
        </button>
      </div>
    </div>
    <vxe-pager
      class="sticky-footer"
      v-show="paginationEnabledAuto && dataSource.length > 0"
      :current-page.sync="page.currentPage"
      :page-size.sync="page.pageSize"
      :total="page.total"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Number,
      default: 4,
    },
    marginWidth: {
      type: Number,
      default: 10,
    },
    containerMaxHeight: {
      type: Number,
      default: 900,
    },
    containerMinHeight: {
      type: Number,
      default: 680,
    },
    customCardWidth: {
      type: Number,
    },
    defaultHeaderStyle: {
      type: Object,
      default: () => {
        return {
          backgroundColor: "#48C356",
        };
      },
    },
    defaultHeaderLeftStyle: {
      type: Object,
      default: () => {
        return {
          color: "#fff",
        };
      },
    },
    customHeaderRightStyle: {
      type: Object,
      default: () => {
        return {
          color: "#fff",
        };
      },
    },
    defaultCaptionStyle: {
      type: Object,
      default: () => {
        return {
          color: "#fff",
        };
      },
    },
    defaultContentStyle: {
      type: Object,
      default: () => {
        return {
          color: "black",
          fontSize: "14px",
        };
      },
    },
    defaultCardStyle: {
      type: Object,
      default: () => {
        return {
          border: "2px solid #436DE5",
          margin: "10px 0 0 10px",
        };
      },
    },
    pageSize: {
      type: Number,
      default: 10, // 每页显示的数据量
    },
    paginationEnabled: {
      type: Boolean,
      default: false, // 分页开关，默认为开启状态
    },
    paginationEnabledAuto: {
      type: Boolean,
      default: false, // 自动分页开关，默认为关闭状态
    },
    page: {
      type: Object,
      default: () => {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
  },
  data() {
    return {
      containerWidth: 0,
      currentPage: 1, // 当前页数，默认为第一页
    };
  },
  mounted() {
    this.containerWidth = this.$refs.containerRef.offsetWidth;
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  computed: {
    containerStyle() {
      return {
        maxHeight: `${this.containerMaxHeight}px`,
        minHeight: `${this.containerMinHeight}px`,
      };
    },
    cardWidth() {
      const totalMarginWidth = (this.columns + 1) * this.marginWidth;
      const widthAfterMargins = this.containerWidth - totalMarginWidth;
      return `calc(${widthAfterMargins / this.columns}px - ${this.marginWidth * 2}px)`;
    },
    currentPageData() {
      if (!this.paginationEnabled) {
        return this.dataSource;
      } else {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        return this.dataSource.slice(startIndex, endIndex);
      }
    },
    totalPages() {
      return Math.ceil(this.dataSource.length / this.pageSize);
    },
  },
  methods: {
    handleResize() {
      this.containerWidth = this.$refs.containerRef.offsetWidth;
    },
    cardStyle(item) {
      return {
        width: this.customCardWidth ? `${this.customCardWidth}px` : this.cardWidth,
        margin: `${this.marginWidth}px`,
        ...this.defaultCardStyle,
        ...item.customCardStyle,
      };
    },
    generateStyle(item, styleType) {
      const customStyleMap = {
        header: "customHeaderStyle",
        headerLeft: "customHeaderLeftStyle",
        headerRight: "customHeaderRightStyle",
        caption: "customCaptionStyle",
        content: "customContentStyle",
      };
      const defaultStyleMap = {
        header: this.defaultHeaderStyle,
        headerLeft: this.defaultHeaderLeftStyle,
        headerRight: this.defaultHeaderRightStyle,
        caption: this.defaultCaptionStyle,
        content: this.defaultContentStyle,
      };
      const customStyleKey = customStyleMap[styleType];
      const customStyle = item[customStyleKey];
      const defaultStyle = defaultStyleMap[styleType];

      if (customStyle) {
        return { ...defaultStyle, ...customStyle };
      } else {
        return { ...defaultStyle };
      }
    },
    goToPage(pageNumber) {
      if (pageNumber >= 1 && pageNumber <= this.totalPages) {
        this.currentPage = pageNumber;
      }
    },
    handlePageChange() {
      this.$emit("handlePageChange", this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollable-container {
  position: relative;
  max-height: 900px;
  min-height: 680px;
  overflow-y: auto;

  .sticky-top {
    position: sticky;
    top: 0;
    background-color: #ffffff; /* 可根据需要设置背景色 */
    margin: 10px;
  }
  .pagination {
    margin-right: 30px;
    justify-content: flex-end;
    align-items: center;
  }
  .card-container {
    display: flex;
    flex-wrap: wrap;

    .card {
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
      .card-header {
        padding: 10px;
        border-bottom: 1px solid #e2e8ec;
        display: flex;
        align-items: center;
        border-radius: 3px;
        .header-left-container {
          margin-right: auto;
        }

        .caption-container {
          flex-grow: 1;
          color: #ffffff;
        }

        .header-right-container {
          margin-left: auto;
          margin-right: 20px;
          color: #ffffff;
        }
      }

      .card-content {
        padding: 10px;
      }
    }
  }
}
.sticky-footer {
  position: sticky;
  bottom: 0;
  right: 0;
}
.no-data {
  font-weight: bold;
  display: flex;
  height: inherit;
  justify-content: center;
  align-items: center;
}
</style>
